<template>
  <div class="aa">
    <!-- 上面部分 -->
    <h4>运输任务管理</h4>
    <el-card style="margin:20px" class="myCard">
      <el-form v-model="data" label-width="110px">

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="任务编号：" prop="id">
              <el-input v-model="data.id" placeholder="请输入任务编号" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="任务分配状态：" prop="assignedStatus">
              <el-select v-model="data.assignedStatus" placeholder="请选择" clearable="">
                <el-option
                  v-for="item in aa"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="满载状态：" prop="loadingStatus">
              <el-select v-model="data.loadingStatus" placeholder="请选择" clearable="">
                <el-option
                  v-for="item in bb"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="车牌号码" prop="licensePlate">
              <el-input v-model="data.licensePlate" placeholder="请输入车牌号码" clearable="" />

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="起始地机构：" prop="startAgency">

              <!-- <el-input
                v-model="data.startAgency"
                placeholder="请选择起始地机构"
                clearable=""
                @focus="isShowTree=true"
              />
              <el-tree
                class="myTree"
                :data="options"
                :props="defaultProps"
                @node-click="deptSelect"
              /> -->

              <!-- <el-tree v-model="data.startAgency" :data="options" default-expand-all > -->

              <el-select v-model="form.startAgency" clearable placeholder="请选择起始地机构">
                <el-option hidden :value="options.id" :label="options.name" />
                <el-tree accordion :data="options" :props="{label:'name'}" @node-click="deptSelect" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="目的地机构：" prop="endAgency">
              <el-select v-model="data.endAgencyId" clearable placeholder="请选择目的地机构">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
                <!-- <el-input
                  v-model="data.endAgency"
                  placeholder="请选择目的地机构"
                  clearable=""
                  @focus="isShowTree1=true"
                /> -->
                <!-- <el-tree
                  class="myTree"
                  :data="options"
                  :props="defaultProps"
                  @node-click="deptSelect1"
                /> -->

              </el-select>

              <!-- <el-cascader
                v-model="data.endAgencyId"
                placeholder="请选择目的地机构"
                :options="options"
                @change="handleChange"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-button type="danger" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form></el-card>

    <!-- 中间部分 -->
    <el-card style="margin:20px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="待提货" name="second" />
        <el-tab-pane label="进行中" name="third" />
        <el-tab-pane label="已完成" name="fourth" />
        <el-tab-pane label="已取消" name="fifth" />
      </el-tabs>
    </el-card>
    <displayList ref="aaa" :res1="res1" />

  </div>
</template>

<script>
import { getTree, getTransportPage } from '@/api/modules/scheduling/transportationTask'
import displayList from '@/components/transportTask'
// import { listToTree } from '@/utils'
export default {
  components: { displayList },
  data() {
    return {
      res1: {},
      // list1: [],
      // 默认情况下，属性不出现
      isShowTree: false,
      isShowTree1: false,
      // 任务分配状态数据
      aa: [
        { value: 2, label: '已分配' },
        { value: 1, label: '待人工分配' }
      ],
      // 满载状态数据
      bb: [
        { value: 2, label: '满载' },
        { value: 3, label: '空载' }
      ],
      options: [{
        label: '东北装运中心',
        children: [{
          label: '沈阳分拣中心',
          children: [
            { label: '和平区营业部' },
            { label: '皇姑区营业部' }
          ]
        }]
      },
      {
        label: '华北转运中心',
        children: [{
          label: '北京分拣中心',
          children: [
            { label: '昌平区营业部' },
            { label: '顺义区营业部' }
          ]
        }, {
          label: '华南转运中心',
          children: [
            { label: '深圳分拣中心', children: [{ label: '宝安区营业部' }, { label: '光明区营业部' }] },
            { label: '广州分拣中心', children: [{ label: '越秀区分拣中心' }, { label: '花都区营业部' }] }
          ]
        }]
      }, {
        label: '华中转运中心',
        children: [{
          label: '武汉分拣中心',
          children: [
            { label: '江汉营业部' },
            { label: '武昌营业部' }
          ]
        }]
      }, {
        label: '华东转运中心',
        children: [{
          label: '上海分拣中心',
          children: [{ label: '虹口区营业部' }, { label: '浦东新区营业部' }]
        }]
      },
      {
        label: '西南转运中心',
        children: [{
          label: '成都分拣中心',
          children: [{ label: '金牛区营业部' }, { label: '青羊区区营业部' }]
        }]
      },
      {
        label: '西北转运中心',
        children: [{
          label: '西安分拣中心',
          children: [{ label: '碑林区营业部' }, { label: '长安区营业部' }]
        }]
      }
      ],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      value: '',
      // 控制滑块第一个显示
      activeName: 'first',
      // 上面部分
      form: {
        id: '',
        assignedStatus: '', // 任务分配状态
        loadingStatus: '', // 满载状态
        busNumber: '', // 车牌号码
        startAgency: '', // 起始地机构
        endAgency: '' // 目的地机构
      },
      data: {
        id: '', // 任务编号
        status: '',
        loadingStatus: '', // 满载状态
        licensePlate: '', // 车牌号码
        assignedStatus: '', // 任务分配状态
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgency: '', // 起始地机构
        endAgency: '' // 目的地机构
      }
    }
  },
  async created() {
    // const res = await getTree()
    // console.log(JSON.parse(res.data))
    // 获取机构树状图机构信息
    let { data } = await getTree()
    // console.log(data)
    if (data.data) {
      data = data.data
    }
    const tree = JSON.parse(data)
    // console.log(321321312321321, tree)
    // const dsa = listToTree(tree, '0')
    // console.log(321231111, dsa)
    this.options = tree

    // console.log(321321, this.$refs.aaa.form)
    // console.log(res)
    // console.log(JSON.parse(res.data))
    // this.options = JSON.parse(res.data.data)
    // const dd = asd.map(v => {
    //   const aa = []
    //   aa.name = v.name
    //   aa.children = v.children.map(v => v.name)
    //   aa.children.children = v.children.map(item => item.children)

    //   return aa
    // })
    // console.log('树形遍历后的数据', dd)
  },
  methods: {
    // 部门选中后的操作
    deptSelect(data) {
      console.log(321321321321321, data)
      // 赋值
      this.form.startAgency = data.name
      // 关闭弹窗
      this.isShowTree = false
    },
    deptSelect1(data) {
      // 赋值
      this.data.endAgency = data.label
      // 关闭弹窗
      this.isShowTree1 = false
    },
    handleClick(tab, event) {
      // console.log('tab', tab.label)
      this.$refs.aaa.label = tab.label
      // console.log('event', event)
    },
    handleChange() {},

    /**
     * 搜索按钮
     */
    async search() {
      const dsa = {}
      // const res = await getTransportPage(this.data)
      // console.log(res)
      // this.list = res.data.data
      console.log(this.data)
      for (const key in this.data) {
        // this.data[key] === this.form
        dsa[key] = this.data[key]
      }
      dsa.page = this.$refs.aaa.form.page
      dsa.pageSize = this.$refs.aaa.form.pageSize
      const res1 = await getTransportPage({ ...dsa, page: dsa.page, pageSize: dsa.pageSize })
      console.log(321321, res1.data.items)
      // this.list1 = res1.data.items
      this.$refs.aaa.list = res1.data.items
      console.log('this.$refs.aaa.list', this.$refs.aaa.list)
      // this.$refs.aaa.loadPage()

      // if (this.data.loadingStatus === this.form.loadingStatus) {
      //   // this.$refs.aaa.label
      //   this.$refs.aaa.loadPage()
      // }
    },
    loadPage() {},

    // 重置按钮
    reset() {
      this.data = ''
    }
  }

}

</script>

<style lang='scss' scoped>
.myCard{
  overflow: visible;
}
.aa{
  background-color: #f3f5f9;
}
.myTree{
  border: 1px solid #ccc;
  position: absolute;
  z-index: 1111111;
  height: 200px;
  overflow: auto;
  width: 100%;

}

.el-tabs__item is-top is-active{
  background-color: red;
}
</style>
